<template>
    <div class="userManage">
        <el-table :data="OrderData.slice((admincurrentPage - 1) * adminpage, admincurrentPage * adminpage)"
            style="width: 100%;height: calc(100% - 40px);" :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center', background: '#f0f0f5', color: '#606266' }" border>
            <el-table-column label="序号" width="55">
                <template slot-scope="scope">
                    <span>{{ (admincurrentPage - 1) * adminpage + scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column label="下单金额" prop="useMoney">
            </el-table-column>
            <el-table-column label="下单时间" prop="createTime">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleClick(scope.$index, scope.row)">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="text-align: center;height: 40px;" background @current-change="adminhandleCurrentChange"
            :current-page.sync="admincurrentPage" layout="prev, pager, next" :page-size="adminpage"
            :total="OrderData.length">
        </el-pagination>
        <el-dialog title="订单详情" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-card class="box-card" v-if="rowData">
                <el-image 
                    style="width: 100px; height: 100px"
                    :src="rowData.image"
                    :preview-src-list="[rowData.image]">
                </el-image>
                <div class="text item">
                    购买用户：{{rowData.userName}}
                </div>
                <div class="text item">
                    商品名称：{{JSON.parse(rowData.goods).title}}
                </div>
                <div class="text item">
                    商品价格：{{JSON.parse(rowData.goods).money}} 元
                </div>
                <div class="text item" v-if="JSON.parse(rowData.coupon).conDetails">
                    优惠券描述：{{JSON.parse(rowData.coupon).conDetails.title || "无优惠券"}} 
                
                </div>
                <div class="text item" v-if="JSON.parse(rowData.coupon).conDetails">
                    优惠券价格：{{JSON.parse(rowData.coupon).conDetails.Money || 0}} 元
                </div>
                <div class="text item">
                    付款：{{rowData.useMoney}} 元
                </div>
            </el-card>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
  
<script>
import apiOrder from '@/api/apiOrder'
export default {
    name: 'userManage',
    data() {
        return {
            OrderData: [],
            admincurrentPage: 1,
            adminpage: 10,
            dialogVisible: false,
            rowData:""
        }
    },
    created() {
        this.getAllOrder()
    },
    methods: {
        getAllOrder() {
            apiOrder.getAllOrder().then(res => {
                this.OrderData = res.data
            })
        },
        handleClick(index, row) {
            this.rowData = row;
            apiOrder.getUserInfo({id:row.userId}).then(res=>{
                console.log(res);
                this.rowData.image = res.data.uImage
                this.rowData.userName = res.data.uName
                this.dialogVisible = true;
            })
            console.log(this.rowData);

            console.log(row);
        },
        adminhandleCurrentChange(val) {
            this.admincurrentPage = val
        },
        handleClose(done) {
            done()
        }
    }
}
</script>
  
<style lang="less" scoped>
.userManage {
    width: 100%;
    height: 100%;
    .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 100%;
  }
}
</style>